import React from 'react';
import './index.css';

import mzsdk from '../../../../utils/mzsdk';

import { InputItem, List, Toast } from 'antd-mobile';
import { closeActionSheet } from '../../../../components/MZActionSheet';

/**
 * 发红包组件
 */

export default class RedPackage extends React.Component {
    constructor(props) {
        super(props);
        this.errMsg = {
            priceTotalHigh: "单次支付金额不可超过50000元",
            priceTooHigh: "单个红包金额不可超过200元",
            countErr: "一次最多发2000个红包",
            priceTooLow: "单个红包金额不可低于0.01元"
        }

        this.state = {
            payPrice: '',//总金额｜支付金额
            note: '',//红包祝福语
            count: '',//红包个数
            error: null,//错误提示
            isLegal: false,//输入的是否满足可支付条件
        }
    }

    componentDidMount() {

    }

    onChangePrice = (value) => {
        this.setState({
            payPrice: this.fixPrice(value)
        }, () => {
            this.fixError()
        })
    }

    onChangeCount = (value) => {
        let newValue = parseInt(value);
        this.setState({
            count: newValue != newValue ? '' : newValue
        }, () => {
            this.fixError()
        })
    }

    onChangeNote = (value) => {
        this.setState({
            note: value
        })
    }

    fixPrice = (value) => {
        //先把非数字的都替换掉，除了数字和.
        value = value.replace(/[^\d.]/g, "");
        //必须保证第一个为数字而不是.
        value = value.replace(/^\./g, "");
        //保证只有出现一个.而没有多个.
        value = value.replace(/\.{2,}/g, ".");
        //保证.只出现一次，而不能出现两次以上
        value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
        //保证.后只出现2位
        value = value.replace(/([0-9]+\.[0-9]{2})[0-9]*/, "$1");
        //去除最开始的0
        if (value.indexOf(".") < 0 && value != "") {
            value = parseFloat(value);
        }
        return value
    }

    fixError = () => {
        let { payPrice, count } = this.state;

        if (count && count > 2000) {
            this.setState({
                error: this.errMsg.countErr,
                isLegal: false,
            })
            return
        } else {
            this.setState({
                error: null,
                isLegal: false
            })
        }
        if (payPrice && payPrice > 50000) {
            this.setState({
                error: this.errMsg.priceTotalHigh,
                isLegal: false,
            })
            return;
        } else {
            this.setState({
                error: null,
                isLegal: false
            })
        }

        let endCount = parseInt(count);
        let endPrice = parseFloat(payPrice);
        let onePrice = endPrice / endCount;
        if (endCount > 0 && endPrice > 0) {
            if (onePrice > 200) {
                this.setState({
                    error: this.errMsg.priceTooHigh,
                    isLegal: false,
                })
                return
            } else if (onePrice < 0.01) {
                this.setState({
                    error: this.errMsg.priceTooLow,
                    isLegal: false,
                })
                return
            }
            this.setState({
                error: null,
                isLegal: true
            })
        }
    }

    toPayRedPackage = () => {
        let { isLegal, payPrice, count, note } = this.state;
        if (isLegal == false) {
            return;
        }
        console.log('去支付')
        Toast.loading('模拟支付', 2.5)
        setTimeout(() => {
            console.log('模拟支付完成，给活动房间发送红包消息')
            Toast.info('模拟支付完成', 1.5);
            setTimeout(() => {
                closeActionSheet()
            }, 1500);
        }, 2500);
    }

    render() {
        let { payPrice, count, error, isLegal } = this.state
        return (
            <div className="send-redPackage-background">
                <div className="send-redPackage-body">
                    <List>
                        <InputItem className="send-redPackage-price" placeholder="0.00" value={payPrice} extra="元" type="money" autoAdjustHeight={true} moneyKeyboardAlign="right" onChange={this.onChangePrice}>
                            <div className="send-redPackage-price-left">
                                <div>总金额</div>
                                <img src={require('../../../../assets/images/lottery-yellow.png')}></img>
                            </div>
                        </InputItem>
                    </List>
                    <div style={{ marginTop: '.2rem' }}></div>
                    <List>
                        <InputItem className="send-redPackage-count" placeholder="填写红包个数" value={count} extra="个" type="money" autoAdjustHeight={true} moneyKeyboardAlign="right" onChange={this.onChangeCount}>红包个数</InputItem>
                    </List>
                    <div style={{ marginTop: '.2rem' }}></div>
                    {
                        error != null && <div className="send-redPackage-error">{error}</div>
                    }
                    <List>
                        <InputItem className="send-redPackage-note" maxLength={15} placeholder='恭喜发财，大吉大利！' onChange={this.onChangeNote}></InputItem>
                    </List>
                    <div className="send-redPackage-pay-price">
                        <div className="send-redPackage-pay-price-coin">¥</div>
                        <div className="send-redPackage-pay-price-total">{payPrice}</div>
                    </div>
                </div>

                <div className="send-redPackage-footer">
                    <button onClick={this.toPayRedPackage} style={{ backgroundColor: isLegal == true ? "rgb(239, 206, 115)" : "rgb(246, 105, 3)", color: isLegal == true ? "rgb(161, 39, 10)" : "rgb(161, 39, 10)" }}>塞钱进红包</button>
                    <div className="send-redPackage-tip">未领取的红包，将于24小时后发起退款</div>
                </div>
            </div >
        )
    }
}
